import { Image, Swiper, SwiperItem } from '@tarojs/components';
import classNames from 'classnames';
import { useEffect, useMemo, useState } from 'react';
import styles from './index.module.less';
import { resizeImgUrl } from '@/common/utils';

type PhotoWallPropsType = {
    data: Movie.CinemaMovieItem[];
    defaultMovieId: string | undefined;
    onMovieChange: (movieId: Movie.CinemaMovieItem['id']) => void;
    useCombination: boolean;
};
function PhotoWall(props: PhotoWallPropsType) {
    const { data, defaultMovieId, onMovieChange, useCombination } = props;
    const [activeIndex, setActiveIndex] = useState<number>(-1);
    useEffect(() => {
        if (data && data.length > 0) {
            if (defaultMovieId !== undefined) {
                const defaultMovieIndex = data.findIndex(
                    (item) => String(item.id) === String(defaultMovieId)
                );
                setActiveIndex(defaultMovieIndex < 0 ? 0 : defaultMovieIndex);
            } else {
                setActiveIndex(0);
            }
        }
    }, [data, defaultMovieId]);
    useEffect(() => {
        if (data && data.length > 0 && activeIndex !== -1 && data[activeIndex]) {
            onMovieChange(data[activeIndex].id);
        }
    }, [activeIndex, data]);

    const movieInfo = useMemo(() => {
        if (data && activeIndex !== -1 && data[activeIndex]) return data[activeIndex];
    }, [activeIndex, data]);

    return (
        <div className={styles.photoWall}>
            <div className={styles.photoSwiperContainer}>
                <Swiper
                    full
                    className={styles.photoSwiper}
                    previousMargin="120px"
                    nextMargin="120px"
                    onChange={(e) => setActiveIndex(e.detail.current)}
                    current={activeIndex === -1 ? undefined : activeIndex}
                >
                    {data.map((item, index) => {
                        const { id } = item;
                        const isActive = activeIndex === index;
                        return (
                            <SwiperItem
                                key={id}
                                itemId={String(id)}
                                className={styles.swiperItem}
                                onClick={() => setActiveIndex(index)}
                            >
                                <Image
                                    className={classNames(styles.photoItem, {
                                        [styles.active]: isActive,
                                    })}
                                    src={resizeImgUrl(item.picUrl)}
                                    mode="aspectFill"
                                />
                            </SwiperItem>
                        );
                    })}
                </Swiper>
                {movieInfo && <div className={styles.centerArrow}></div>}
            </div>
            {movieInfo && (
                <div className={styles.infoContent}>
                    <div className={styles.row}>
                        <span className={styles.name}>{movieInfo.name}</span>
                        &nbsp;&nbsp;
                        {Number(movieInfo.grade) > 0 && (
                            <>
                                <span className={styles.grade}>{movieInfo.grade} 分</span>
                            </>
                        )}
                    </div>
                    <div className={styles.type}>
                        {[
                            movieInfo.duration > 0 ? movieInfo.duration + '分钟' : '',
                            movieInfo.filmTypes,
                            movieInfo.language,
                        ]
                            .filter((str) => !!str)
                            .join(' / ')}
                    </div>
                    {!useCombination && (
                        <div className={styles.coupon}>
                            {(movieInfo.couponShows || []).map((item) => {
                                return (
                                    <div className={styles.couponItem} key={item}>
                                        券 | {item}
                                    </div>
                                );
                            })}
                        </div>
                    )}
                </div>
            )}
        </div>
    );
}

export default PhotoWall;
